<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="24">
				<div style="height: 0.5em;"></div>
			</el-col>
			<el-col :span="1"
			        style="margin-right:10px;">
				<p class="queryLabel">选择月份:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker size="small"
				                v-model="time"
				                format="yyyy-MM"
				                :editable=false
				                type="month"
				                placeholder="选择月份">
				</el-date-picker>
			</el-col>
	
			<el-col :span="1"
			        :offset="1"
			        style="padding-left: 0px;">
				<el-button type="primary"
				           size="small"
				           v-on:click='baseQuery'>查询</el-button>
			</el-col>
			<el-col :span="17"
			        style="margin-left: -10px;text-align: right;">
				<el-button class="el-icon-menu"
				           type="primary"
				           size="small"
				           v-on:click='change'></el-button>
			</el-col>
			<el-col :span="24">
				<div style="height: 1em;"></div>
			</el-col>
	
		</el-row>
		<el-row v-if="table">
			<el-col :span="24">
				<!--
			作者：1813180149@qq.com
			时间：2017-03-06
			描述：车辆回厂率
		-->
				<!--
			作者：吴彦昭
			时间：2017-03-20 16:45
			描述：KPI 表格整理
		-->
				<el-table :data="tableData.dataList"
				          border
				          height=420
				          style="width: 100%;text-align: right;align-content: center;">
					<el-table-column label="客户经理"
					                 prop="uName"
					                 width="100"
					                 align="left">
					</el-table-column>
					<el-table-column label="保养回厂数">
						<el-table-column label="首保"
						                 align="right"
						                 prop="sb"
						                 width="80">
						</el-table-column>
						<el-table-column label="首保目标月"
						                 align="right"
						                 prop="sby"
						                 width="120">
						</el-table-column>
						<el-table-column label="二保"
						                 align="right"
						                 prop="eb"
						                 width="80">
						</el-table-column>
						<el-table-column label="二保目标月"
						                 align="right"
						                 prop="eby"
						                 width="120">
						</el-table-column>
						<el-table-column label="定保"
						                 align="right"
						                 prop="db"
						                 width="80">
						</el-table-column>
						<el-table-column label="定保目标月"
						                 align="right"
						                 prop="dby"
						                 width="120">
						</el-table-column>
						<el-table-column label="保养总计"
						                 align="right"
						                 prop="bySum"
						                 width="100">
						</el-table-column>
					</el-table-column>
					<el-table-column label="流失回厂数">
						<el-table-column label="7-11月流失"
						                 align="right"
						                 prop="ls"
						                 width="120">
						</el-table-column>
					</el-table-column>
					<el-table-column label="总计回厂">
						<el-table-column label="总计回厂"
						                 align="right"
						                 prop="backSum"
						                 width="120">
						</el-table-column>
					</el-table-column>
					<el-table-column label="保养回厂率">
						<el-table-column label="首保回厂率"
						                 align="right"
						                 :formatter="sbRate"
						                 width="120">
						</el-table-column>
						<el-table-column label="首保目标月回厂率"
						                 align="right"
						                 :formatter="sbyRate"
						                 width="150">
						</el-table-column>
						<el-table-column label="二保回厂率"
						                 align="right"
						                 :formatter="ebRate"
						                 width="120">
						</el-table-column>
						<el-table-column label="二保目标月回厂率"
						                 align="right"
						                 :formatter="ebyRate"
						                 width="150">
						</el-table-column>
						<el-table-column label="定保回厂率"
						                 align="right"
						                 :formatter="dbRate"
						                 width="120">
						</el-table-column>
						<el-table-column label="定保目标月回厂率"
						                 align="right"
						                 :formatter="dbyRate"
						                 width="150">
						</el-table-column>
					</el-table-column>
					<el-table-column label="流失回厂率">
						<el-table-column label="7-11月流失回厂率"
						                 align="right"
						                 :formatter="lsBackRate"
						                 width="150">
						</el-table-column>
					</el-table-column>
	
				</el-table>
				<el-pagination small
				               @size-change="handleSizeChange"
				               @current-change="handleCurrentChange"
				               :current-page="CurentPage"
				               :page-sizes="page.pageSizes"
				               :page-size="50"
				               layout=" total,prev, pager, next"
				               :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-row :gutter="24"
		        v-if="!table">
			<el-col :span="6"
			        v-for="item in tableData.dataList">
				<el-card class="box-card"
				         style="height: 220px;width: 100%;">
					<div slot="header"
					     class="clearfix">
						<strong style="line-height: 15px;">客户经理：{{item.uName}}</strong>
					</div>
					<div>
						首保/首保目标月：{{item.sb}}/{{item.sby}}
						<br> 二保/二保目标月：{{item.eb}}/{{item.eby}}
						<br> 定保/定保目标月：{{item.db}}/{{item.dby}}
						<br> 保养总计：{{item.bySum}}
						<br> 7-11月流失：{{item.ls}}
						<br> 总计回厂：{{item.backSum}}
						<br>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
<script>
import echarts from 'echarts'
export default {
	data: function () {
		return {
			//表格显示
			table: true,
			msg: "123",
			//页码数
			CurentPage: 1,
			//每页的数量
			page: this.page,
			//分组数据
			tableData: {
				total: 0,
				dataList: []
			},
			time: '',
		}
	},
	methods: {
		//表格转换
		change: function () {
			if (this.$data.table == true) {
				this.$data.table = false;
			} else {
				this.$data.table = true;
			}
		},

		//首保回厂率
		sbRate: function (row, column) {
			return this.rateMath(row.sb, row.bySum);
		},
		//首保月回厂率
		sbyRate: function (row, column) {
			return this.rateMath(row.sby, row.bySum);
		},
		//二保回厂率
		ebRate: function (row, column) {
			return this.rateMath(row.eb, row.bySum);
		},
		//二保月回厂率
		ebyRate: function (row, column) {
			return this.rateMath(row.eby, row.bySum);
		},
		//定保回厂率
		dbRate: function (row, column) {
			return this.rateMath(row.db, row.bySum);
		},
		//定保月回厂率
		dbyRate: function (row, column) {
			return this.rateMath(row.dby, row.bySum);
		},
		//7-11月流失回厂率
		lsBackRate: function (row, column) {
			return this.rateMath(row.ls, row.backSum);
		},
		rateMath: function (num, nums) {
			if (nums == 0) {
				return '0';
			} else {
				return (num / nums * 100).toFixed(2) + "%";
			}
		},

		//查询
		baseQuery: function () {
			debugger;
			var dates;
			if (this.$data.time == '') {
				dates = this.$data.time;
			}
			else {
				dates = this.moment(this.$data.time).format("YYYY-MM");
			}
			this.$http.post(this.API_ROOT + '/crm/kpi/CarBackRate', this.$data.condition, {
				params: {
					mDate: dates,
					start: this.$data.CurentPage,
					limit: 50
				}
			})
				.then(resp => {
					if (resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						// es5写法
						this.$data.tableData = resp.data;
						//this.baseQuery(this.$data.curTreeDeptId);
						//this.$data.exFormShow = false;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => { });
		},
		//列表，分页大小切换
		handleSizeChange: function () { },
		//列表,当前页切换
		handleCurrentChange: function (currentPage) {
			this.$data.CurentPage = currentPage;
			//this.$data.dictGroup = '';
			this.baseQuery();
		},
		//状态转换
		statusCov: function (row, column) {
			return row.newRemind == "0" ? '已预约' : '未预约';
		},
		//时间转换
		buyDates: function (row, column) {
			if (row.recordLength == "" || row.recordLength == null) return "";
			return moment(Number(row.recordLength)).format("YYYY-MM-DD");
		},
	},
	//表单创建时执行
	created: function () {
		this.baseQuery();
	}
}
</script>
<style>
.el-table .info-row {
	height: 10px !important;
}

.item {
	width: 30px;
}

.el-form-item {
	clear: both;
}

.el-dropdown .el-button-group,
.el-table .el-tooltip,
.el-table .el-tooltip__rel {
	display: inline;
}

.el-table {
	height: 100%;
	width: 100%;
}

#el-select {
	width: 200px;
}
</style>